<template>
    <div style="margin: 0 auto; width: 400px;">
        <el-form ref="form" :model="brrower" label-width="80px">
            <el-form-item label="借款金额">
                <el-input @change="verifyPrice(),getPlan()" v-model="brrower.price"></el-input>
            </el-form-item>
            <el-form-item label="借多久">
                <el-select v-model="brrower.loanperiods" placeholder="请选择期数"
                @change="getPlan()"
                >
                    <el-option checked label="3个月" value="3个月"></el-option>
                    <el-option label="6个月" value="6个月"></el-option>
                    <el-option label="12个月" value="12个月"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="怎么还">
                <span>按日计息，随借随还0违约金</span>
            </el-form-item>
            <el-form-item label="还款计划">
                <div>
                    <el-button plain @click="dialogTableVisible = true">
                        <span>首期{{planResult.firstPhase}} 应还{{planResult.should}}</span>
                        <br>
                        <span>总和利息 {{planResult.sumInterest}}</span>
                    </el-button>
                </div>
            </el-form-item>
            <el-form-item label="优惠券">
                <el-select v-model="value" @change="useCoupon(value)" placeholder="请选择">
                    <el-option value="">不使用</el-option>
                    <el-option
                            v-for="item in options"
                            :key="item.couponPrice"
                            :label="item.couponName"
                            :value="item.couponPrice">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="收款卡">
                <span>{{bankcard.cardNo}}</span>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">确认借款</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>

<!--        对话框-->
        <el-dialog title="按日计息" :visible.sync="dialogTableVisible">
            <span>还款总额(元)</span><br>
            <span>{{planResult.sumPrice}}</span><br>
            <span>日利率0.065%</span><br>
            <span>总综合利息 {{planResult.sumInterest}}</span><br>
            <el-table :data="planResult.plan">
                <el-table-column property="repayment" label="还款日" width="150"></el-table-column>
                <el-table-column property="monthIncome" label="还款" width="200"></el-table-column>
                <el-table-column property="monthCapital" label="本金"></el-table-column>
                <el-table-column property="monthInterest" label="利息"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "creditLoans",
        data() {
            return {
                brrower: {
                    loanperiods: '',
                    repaymentType: '',
                    purpose: '',
                    annual: '',
                    userId: this.$route.query.userId,
                    productId: '',
                    infoId: '',
                    price: '',
                    states: '',
                    startTime: '',
                },
                planResult: {},
                bankcard:{},
                user:{},
                options: [],
                value: '',
                gridData: [],
                dialogTableVisible: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px'
            }
        },
        created(){
          // 获取用户信息
          this.userById()
          // 获取还款计划
          this.brrower.price=1000
          this.brrower.loanperiods = '3个月'
          this.getPlan()
        },
        methods: {
            // 前往认证
            onSubmit() {
                this.$router.push({
                    path:'/authentication',
                    query:{
                        userId:this.brrower.userId
                    }
                })
            },
            // userById
            userById(){
              this.$http.get('api/crud/user/userById?userId='+this.brrower.userId).then(res=>{
                  this.user = res.data.data
                  // 获取银行卡
                  this.$http.get('api/crud/bankcard/getBankCard?cardId='+this.user.cardId).then(res=>{
                      this.bankcard = res.data.data
                  })
                  // 获取优惠券
                  this.$http.post('api/crud/user/getCoupon?userId='+this.brrower.userId).then(res=>{
                      this.options = res.data.data
                  })
              })
            },
            // 验证输入金额是否大于额度
            verifyPrice(){
                if(this.brrower.price>this.user.loanAmount){
                    alert('借款金额不能大于额度')
                    this.price=''
                }
                console.log(this.brrower.price+'  '+this.user.loanAmount)
            },
            // 获取还款计划
            getPlan(){
                this.$http.post('api/crud/borrower/computer',this.brrower).then(res=>{
                    this.planResult = res.data.data
                })
            },
            // 使用优惠券
            useCoupon(value){
                this.brrower.states = value
                this.getPlan()
            }
        }
    }
</script>

<style scoped>

</style>